<template name="chongzhang">
  <uni-popup ref="popup_dialogs" type="dialog" title="修正回款记录" minHeight="auto" minWidth="auto">
    <view class="container">
      <view class="order-list">
        <view class="order-item editing">
          <!-- 基本信息展示 -->
          <view class="info-section">
            <view class="row">
              <text>订单：{{ order.id }}</text>
              <text>时间：{{ order.date }}</text>
            </view>
            <view class="row">
              <text>客户：{{ order.name }}</text>
              <text>操作：{{ order.uid_name }}</text>
            </view>
            <!-- 旧金额展示 -->
            <view class="row bb4e00">
              <view class="money-item">
                <text class="label">余额：</text>
                <text class="value old">{{ order.money_n }}元</text>
              </view>
              <view class="money-item">
                <text class="label">金额：</text>
                <text class="value old">{{ order.money }}元</text>
              </view>
              <view class="money-item">
                <text class="label">结余：</text>
                <text class="value old">{{ order.money_m }}元</text>
              </view>
            </view>
          </view>

          <!-- 编辑区域 -->
          <view class="edit-section">
            <view class="edit-row">
              <text class="label">修正的金额：</text>
              <input
                v-model="now_order.newAmount"
                type="number"
                placeholder="输入新金额"
                class="input"
              />
            </view>
            <view class="edit-row">
              <text class="label">修正的原因：</text>
              <input
                v-model="now_order.descr"
                placeholder="输入修正的详细原因"
                class="input"
				@confirm="confirmRedFlush(order)"
              />
            </view>
            <!-- 新金额展示 -->
            <view class="row bb4e00 new-amount-section">
              <view class="money-item">
                <text class="label">余额：</text>
                <text class="value new">{{ order.money_n }}元</text>
              </view>
              <view class="money-item">
                <text class="label">回款：</text>
                <text class="value new">{{ now_order.newAmount || 0 }}元</text>
              </view>
              <view class="money-item">
                <text class="label">结余：</text>
                <text class="value new">{{ calculateBalance(now_order.newAmount) }}元</text>
              </view>
            </view>
            <view class="button-group">
              <button class="confirm-btn" @click="confirmRedFlush(order)">确认冲红</button>
              <button class="cancel-btn" @click="cancelEdit(order)">取消</button>
            </view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import empty from "@/components/admin-components/empty.vue";

export default {
  name: "chongzhang",
  components: {
    empty,
  },
  data() {
    return {
      // 源回款的订单
      order: {},
      now_order: {
        newAmount: "",
        balance: "",
        descr: "",
      },
    };
  },
  // 此处定义传入的数据
  props: {},
  watch: {},
  created() {
    if (this.order_id == undefined || this.sorder_id == "") {
      return;
    }
    if (this.sourceMoney == undefined || this.sourceMoney == "") {
      return;
    }
    // this.loadData()
  },
  methods: {
    open(order) {
      this.order = order;
      this.$refs.popup_dialogs.open();
    },
    // 计算结余金额
    calculateBalance(newAmount) {
      if (!newAmount) return "0.00";
	  if(newAmount<0){
		  var balance = Number(this.order.money_n )+ Math.abs(newAmount)
	  }else{
		  var balance = Number(this.order.money_n )- Number(newAmount)
	  }
      return balance
    },
    // 确认冲红
    confirmRedFlush(order) {
      if (!this.now_order.newAmount || !this.now_order.descr) {
        uni.showToast({ title: "请填写金额和原因", icon: "none" });
        return;
      }
	  	var that = this
	  	that.$common.get_request(
	  		{
	  			type:'addOederMoney',
	  			order_id:order.id,
	  			money:this.now_order.newAmount,
	  			descr:this.now_order.descr,
	  		},
	  		(res)=>{
				// 更新本地数据
				that.order.money_n = parseFloat(this.now_order.newAmount);


				uni.showToast({ title: "冲红成功", icon: "success" });
				that.$refs.popup_dialogs.close();
	  			that.$common.toast('成功')
	  		}
	  	);
    },
    // 取消编辑
    cancelEdit() {
      this.$refs.popup_dialogs.close();
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.order-item {
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 8rpx;
  background: #fff;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.editing {
  border: 2rpx solid #f0ad4e; /* 编辑状态高亮边框 */
}

.row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.money-item {
  flex: 1;
  text-align: center;
  padding: 10rpx;
  background: #f9f9f9;
  border-radius: 6rpx;
  margin: 0 5rpx;
  border: 1rpx solid #eee;
}

.label {
  font-weight: bold;
  color: #666;
}

.value {
  font-weight: bold;
}

.value.old {
  color: #999; /* 旧金额颜色 */
}

.value.new {
  color: #f0ad4e; /* 新金额颜色 */
}

.edit-section {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #eee;
}

.edit-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.input {
  flex: 1;
  margin-left: 20rpx;
  padding: 10rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  font-size: 28rpx;
}

.button-group {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
}

.confirm-btn {
  background: #4caf50;
  color: white;
  flex: 1;
  border-radius: 6rpx;
  font-size: 28rpx;
  padding: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.cancel-btn {
  background: #666;
  color: white;
  flex: 1;
  border-radius: 6rpx;
  font-size: 28rpx;
  padding: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.new-amount-section {
  background: #fafafa;
  padding: 10rpx;
  border-radius: 6rpx;
  margin-top: 20rpx;
}
</style>